<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Amaze UI Admin form Examples</title>
<meta name="description" content="这是一个form页面">
<meta name="keywords" content="form">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="../../assets/i/favicon.png">
<link rel="apple-touch-icon-precomposed"
	href="../../assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="../../assets/css/amazeui.min.css" />
<link rel="stylesheet" href="../../assets/css/admin.css">

<script type="text/javascript">
	function startUp() {
		document.getElementById("attributeOptionTr").style.display = "none";
		document.getElementById("raiseItem").style.display = "none";
		onchangeofshow();
	}
	//商品属性类型选项为单选或者多选显示选项内容
	function onchangeofshow() {
		var key = document.getElementById("productAttributeType").value;
		if (key == "radio" || key == "checkbox") {
			document.getElementById("attributeOptionTr").style.display = "block";
			document.getElementById("raiseItem").style.display = "block";
				
		} else {
			document.getElementById("attributeOptionTr").style.display = "none";
			document.getElementById("raiseItem").style.display = "none";
		}
	}
	//加号按钮
	function addAttributeOptionTr() {
		var attributeOptionTrHtml = '<div id="attributeOptionTr"  class="attributeOptionTr am-g am-margin-top">'
				+ '<div class="am-u-sm-4 am-u-md-2 am-text-right">选项内容</div>'
				+ '<div class="am-u-sm-8 am-u-md-4">'
				+ '<input type="text" name="attributeOptionList" class="" value="${list!}" />'
				+ '</div>'
				+ '<div class="am-hide-sm-only am-u-md-6 am-text-warning" style="padding:0px;margin:0px;">'
				+ '<button id = "deleteImage" type="button" onclick="deleteImageBtn()" class="am-btn am-btn-warning am-btn-xs"><span class="am-icon-trash-o"></span></button>'
				+ '</div>' + '</div>';
		if ($(".attributeOptionTr").length > 0) {
			$("#attributeOptionTr").after(attributeOptionTrHtml);
		}
	}
	//删除按钮选项内容输入框
	function deleteImageBtn(){
		if($(".attributeOptionTr").length > 1) {
			//$(this).parent().parent().remove();
			$(".attributeOptionTr:last").remove();
		} else {
			alert("请至少保留一个选项!");
		}
	}
	//减号点击事件
	function deleteAttributeOptionTr(){
		
		if($(".attributeOptionTr").length > 1) {
			$(".attributeOptionTr:last").remove();
		} else {
			alert("请至少保留一个选项!");
		}
	}
	
	
</script>
</head>
<body onload="startUp()">
	<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

	<header class="am-topbar am-topbar-inverse admin-header">
		<div class="am-topbar-brand">
			<strong>Amaze UI</strong> <small>后台管理模板</small>
		</div>

		<button
			class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
			data-am-collapse="{target: '#topbar-collapse'}">
			<span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span>
		</button>

		<div class="am-collapse am-topbar-collapse" id="topbar-collapse">

			<ul
				class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list">
				<li><a href="javascript:;"><span class="am-icon-envelope-o"></span>
						收件箱 <span class="am-badge am-badge-warning">5</span></a></li>
				<li class="am-dropdown" data-am-dropdown><a
					class="am-dropdown-toggle" data-am-dropdown-toggle
					href="javascript:;"> <span class="am-icon-users"></span> 管理员 <span
						class="am-icon-caret-down"></span>
				</a>
					<ul class="am-dropdown-content">
						<li><a href="#"><span class="am-icon-user"></span> 资料</a></li>
						<li><a href="#"><span class="am-icon-cog"></span> 设置</a></li>
						<li><a href="#"><span class="am-icon-power-off"></span>
								退出</a></li>
					</ul></li>
				<li class="am-hide-sm-only"><a href="javascript:;"
					id="admin-fullscreen"><span class="am-icon-arrows-alt"></span>
						<span class="admin-fullText">开启全屏</span></a></li>
			</ul>
		</div>
	</header>
	<div class="am-cf admin-main">
		<!-- 引用菜单header_menu.html sidebar start -->

		<% include("/includes/header_menu.html"){} %>
		<!-- sidebar end -->

		<!-- content start -->
		<div class="admin-content">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">商品管理</strong> / <small>
						添加商品属性 </small>
				</div>
			</div>
			<hr>
			<div class="admin-content-body" class="am-u-sm-12"
				style="padding: 0px 5px 0px 0px; margin: 0px; height: 700px;">
				<form id="inputForm" name="Form" class="am-form"
					action="/productAttribute/update" method="post">
					<div class="am-g am-margin-top">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">所属商品类型</div>
						<div class="am-u-sm-8 am-u-md-4" style="float: left">
						<input type="hidden" name="productAttribute.id" value="${productAttribute.id}">
							<select name="productAttribute.productType_id" id="productTypeId"
								data-am-selected="{btnSize: 'sm'}">
								<option value=""></option> 
								<%for(list in allProductType){%>
								<option value="${list.id}"
								<%if (list.id == productTypeId! || list.id == productAttribute.producttype.id!){%> selected<%}%>>
									${list.name}
								</option>  
								<%}%>
							</select>
						</div>
					</div>
					<div class="am-g am-margin-top">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">商品属性名称</div>
						<div class="am-u-sm-8 am-u-md-4">
							<input type="text" class="am-input-sm"
								name="productAttribute.name" value="${productAttribute.name}" required>
						</div>
						<div class="am-hide-sm-only am-u-md-6">*必填，不可重复</div>
					</div>
					<div class="am-g am-margin-top">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">商品属性类型</div>
						<div class="am-u-sm-8 am-u-md-4" style="float: left">
							<select id="productAttributeType" name="productAttribute.attributeType"
								data-am-selected="{btnSize: 'sm'}" onchange="onchangeofshow()">
								<option value=""></option> <%for(map in allAttributeType){%>
								<option value="${map.key}"  <% if(map.key == productAttribute.attributeType){%>  selected<%}%>>
								${map.value}
								</option> 
								<%}%>
							</select>
						</div>
					</div>
					<% for(var i=0;i< attributeOptionStoreList.~size;i++){%>
					<div id="attributeOptionTr" class="attributeOptionTr am-g am-margin-top">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">选项内容</div>
						<div class="am-u-sm-8 am-u-md-4">
							<input type="text" name="attributeOptionList" class=""  value="${attributeOptionStoreList[i]}"/>
						</div>
						<div class="am-hide-sm-only am-u-md-6 am-text-warning" style="padding:0px;margin:0px;">
							<button id="deleteImage" type="button" onclick="deleteImageBtn()"
								class="am-btn am-btn-warning am-btn-xs">
								<span class="am-icon-trash-o"></span>
							</button>
						</div>
						
					</div>
					<%}%>
					<div id="raiseItem" class="am-u-sm-6 am-u-md-6 am-text-right">
							<button id="addImage" type="button"
								onclick="addAttributeOptionTr()"
								class="am-btn am-btn-success am-btn-xs">+</button>
							<button id="removeImage" type="button" onclick="deleteAttributeOptionTr()"
								class="am-btn am-btn-warning am-btn-xs">-</button>
					</div>
					
					<div id="entext" class="am-g am-margin-top" style="float:left">
						<div class="am-u-sm-4 am-u-md-2 am-text-right">排序</div>
						<div class="am-u-sm-8 am-u-md-4" style="float: left">
							<input type="text" class="am-input-sm"
								name="productAttribute.orderList" value="${productAttribute.orderList}" required>
						</div>
					</div>

					<div class="am-g am-margin-top">
			            <div class="am-u-sm-4 am-u-md-2 am-text-right" style="margin-top:0.8rem">是否必填</div>
			            <div class="am-u-sm-4 am-u-md-4" style="float: left">
			            <div class="am-g">
							  <div class="am-u-sm-2"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isRequired" value="true"  data-am-ucheck<%if (productAttribute.isRequired == true){%> checked<%}%>> 是</label></div>
							  <div class="am-u-sm-5"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isRequired" value="false" data-am-ucheck<%if (productAttribute.isRequired == false){%> checked<%}%>> 否</label></div>
							</div>
			            </div>
			       </div>
			       
			        <div class="am-g am-margin-top">
	            <div class="am-u-sm-4 am-u-md-2 am-text-right" style="margin-top:0.8rem">是否启用</div>
	            <div class="am-u-sm-4 am-u-md-4">
	            	<div class="am-g">
					  <div class="am-u-sm-2"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isEnabled" value="true" data-am-ucheck<%if (productAttribute.isEnabled == true){%> checked<%}%>> 是</label></div>
					  <div class="am-u-sm-5"><label class="am-radio am-secondary"><input type="radio" name="productAttribute.isEnabled" value="false" data-am-ucheck<%if (productAttribute.isEnabled! == false){%> checked<%}%>> 否</label></div>
					</div>
	            </div>
	             <div class="am-hide-sm-only am-u-md-6 am-text-warning">${isEnabledMessages!}</div>
	          </div>

					<div class="am-margin">
						<button type="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
						<button type="button" class="am-btn am-btn-primary am-btn-xs"
							onclick="window.history.back(); return false;">放弃保存</button>
					</div>
				</form>
			</div>
			<footer class="admin-content-footer">
				<hr>
				<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed
					under MIT license.</p>
			</footer>
		</div>
		<!-- content end -->

	</div>
	<a href="#"
		class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu"
		data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

	<footer>
		<hr>
		<p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under
			MIT license.</p>
	</footer>

	<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="../../assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="../../assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<script src="../../assets/js/amazeui.min.js"></script>
	<script src="../../assets/js/app.js"></script>
</body>
</html>
